<template>
	<el-date-picker
		v-model="rangeDate"
		type="daterange"
		value-format="YYYY-MM-DD"
		range-separator="~"
		start-placeholder="开始时间"
		end-placeholder="结束时间"
		:shortcuts="shortcuts"
		@change="change" />
</template>

<script>
export default {
    data() {
        return {
            rangeDate: [],
            startDate: '',
            endDate: '',
            shortcuts: [
                {
                    text: '上一周',
                    value: () => {
                        return this.daySpan(7);
                    }
                },
                {
                    text: '上两周',
                    value: () => {
                        return this.daySpan(14);
                    }
                },
                {
                    text: '上一个月',
                    value: () => {
                        return this.daySpan(30);
                    }
                },
                {
                    text: '上三个月',
                    value: () => {
                        return this.daySpan(90);
                    }
                }
            ],
        };
    },
    methods: {
        change() {
            if (this.rangeDate !== null) {
                this.startDate = this.rangeDate[0];
                this.endDate = this.rangeDate[1];
            } else {
                this.startDate = '';
                this.endDate = '';
            }

            this.$emit("change", [this.startDate, this.endDate]);
        },
        daySpan(num) {
            const end = new Date();
            const start = new Date().setTime(end.getTime() - 3600 * 1000 * 24 * num);
            return [start, end];
        }
    }
}
</script>

<style scoped></style>
